<!-- 意见反馈 -->
<template>
  <div class="vip">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="购苗木会员首页"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
      safe-area-inset-top
    />

    <div
      v-if="vipData.length > 0"
      class="main-wrapper"
      :style="`background: ${vipData[current].colour}`"
    >
      <div class="content">
        <van-swipe class="my-swipe" @change="onChange">
          <van-swipe-item v-for="(item, index) in vipData" :style="`background: ${item.colour}`">
            <div v-show="index === current">
              <div class="header">
                <img class="bg" :src="`${bg[current]}`" />
                <p class="gift" :style="`color: ${item.colour}`">
                  赠送苗币每月{{ item.giftMoneyByMonth }}个一年{{ item.giftMoneyByYear }}个
                </p>
                <p class="amount" :style="`color: ${item.colour}`">
                  一年费用{{ item.openMoney }}元 2年费用<span>{{ item.openDoubleMoney }}</span
                  >元
                </p>
              </div>
              <div class="config-wrapper" :style="`background: ${bgColor[index]}`">
                <div class="title">开通即享{{ item.authConfigList.length }}项权益</div>
                <div class="config-list">
                  <div class="config-item" v-for="auth in item.authConfigList">
                    <img class="icon" :src="auth.baseIcon" alt="" />
                    <p class="config-name">{{ auth.configName }}</p>
                  </div>
                </div>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>

      <div
        v-if="vipData[current].upVipLevelFlag"
        class="footer"
        :style="`background: ${vipData[current].colour}`"
      >
        <van-button round @click="handleUpgrade">升级会员</van-button>
      </div>
    </div>

    <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '85%' }">
      <div class="header">
        <div class="left" @click="showBottom = false">取消</div>
        <div class="title">确认支付</div>
      </div>
      <div class="user-info">
        <div class="flex">
          <img class="avatar" :src="user.headUrl" alt="" />
          <div class="info">
            <div class="phone">{{ user.nickName }}</div>
            <div class="vip">{{ user.vipLevelName }}</div>
          </div>
        </div>
        <div class="tips">开通当天立即享有会员权益</div>
      </div>
      <div class="title">开通会员</div>
      <div class="img-wrapper">
        <img :src="`${bg[current]}`" alt="" />
        <div class="content" :style="`color: ${vipData[current].colour}`">
          <p>享有{{ vipData[current].authConfigList.length }}个特权权益</p>
          <p>每月赠送苗币{{ vipData[current].giftMoneyByMonth }}个</p>
        </div>
      </div>
      <div class="title">购买时长</div>
      <div class="goods">
        <div
          @click="select(item, index)"
          class="goods-item"
          :class="item.selected ? 'selected' : ''"
          v-for="(item, index) in vipData[current].upVipLevelList"
        >
          <div class="time">{{ item.yearNum }}年</div>
          <div class="amount">￥{{ item.openMoney }}元</div>
        </div>
      </div>
      <van-button @click="update" color="#32BC05" round class="submit-btn"
        >确认协议并升级</van-button
      >
      <div class="books">
        <van-checkbox icon-size="16px" checked-color="#32BC05" v-model="checked"
          >开通前请阅读<span>《购苗木会员协议》</span></van-checkbox
        >
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import { getUserVipLevel, userInfo } from '@/api'
import bridge from '@/utils/bridge'
const base = 'https://goumiaomu-prod.oss-cn-hangzhou.aliyuncs.com/2025/04/17/'
const vipData = ref([])
const current = ref(0)
const bgColor = ref(['#10321E', '#1E1D3A', '#232119', '#152370', '#1C1B1B'])
const bg = ref([
  base + '209d720a14f14bea9084ba6e582276cc.png',
  base + 'dd110351a36145b6b1ee70b287fcc250.png',
  base + '56fdbac6d1374d3688a005989476ea26.png',
  base + '014dbb7bd3f44432b3a27864174c1dde.png',
  base + '9ace6f1671dc49bdb218ecc6c7a14584.png'
])
const showBottom = ref(false)
const user = ref({})
const checked = ref(false)
const checkedVip = ref(false)
const selectedVip = ref({})

const onClickLeft = () => {
  bridge.closeWebView()
}

// 获取权益数据
const getVipData = async () => {
  let { code, data } = await getUserVipLevel()
  if (code === 200) {
    vipData.value = data
  }
}

const onChange = (index) => {
  current.value = index
}

// 升级会员
const handleUpgrade = () => {
  showBottom.value = true
}

const getUserInfo = async () => {
  let { code, data } = await userInfo()
  if (code === 200) {
    user.value = data
    user.value.vipLevelName = vipData.value.find(
      (item) => item.vipLevelCode === data.vipLevelCode
    ).vipLevelName
  }
}

const select = (item, index) => {
  vipData.value[current.value].upVipLevelList.map((v, i) => {
    if (i === index) {
      v.selected = true
    } else {
      v.selected = false
    }
  })

  selectedVip.value = item
  checkedVip.value = true
}

const update = () => {
  if (checked.value) {
    if (checkedVip.value) {
      bridge.navigateBackTo({
        value: 'topay',
        vipLevelCode: selectedVip.value.vipLevelCode,
        years: selectedVip.value.yearNum,
        payMoney: selectedVip.value.openMoney,
        payType: 'buyVip',
        productId: selectedVip.value.productId,
        auditStatus: selectedVip.value.auditStatus
      })
    } else {
      showToast('请选择需要购买的时长')
    }
  } else {
    showToast('请同意购苗木会员协议')
  }
}

onMounted(async () => {
  bridge.setNavigationBarVisible({
    value: '0'
  })
  await getVipData()
  await getUserInfo()
})
</script>

<style lang="scss" scoped>
.vip {
  :deep(.van-nav-bar) {
    &::after {
      border: none;
    }

    .van-icon {
      color: #222;
    }
    .van-nav-bar__title {
      font-size: 17px;
      font-weight: normal;
      color: #222;
    }
  }

  :deep(.van-nav-bar__content) {
    height: 44px;
  }

  .main-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 44px);

    .content {
      flex: 1;
      overflow-y: auto;
    }

    .footer {
      padding: 18px 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      .van-button {
        width: 100%;
        height: 45px;
        border: none;
        background: linear-gradient(180deg, #fff1e2 2%, #ffa88c 62%);
        color: #480000;
      }
    }
  }

  .my-swipe {
    background: rgba(0, 0, 0, 0.9);

    .header {
      position: relative;
      margin: 0 25px;

      .bg {
        display: block;
        width: 100%;
      }

      .gift {
        position: absolute;
        top: 70px;
        left: 14px;
        font-size: 10px;
        color: #160063;
      }

      .amount {
        position: absolute;
        top: 90px;
        left: 14px;
        font-size: 13px;
        color: #160063;

        span {
          font-size: 20px;
        }
      }
    }

    .config-wrapper {
      padding: 20px 28px;
      margin: 22px 12px;
      background: #1c1b1b;

      .title {
        margin-bottom: 20px;
        color: #fff;
        font-size: 15px;
        text-align: center;
      }

      .config-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 3%;

        .config-item {
          margin-bottom: 16px;
          flex: 0 0 22%;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;

          .icon {
            display: block;
            width: 48px;
          }

          .config-name {
            font-size: 11px;
            color: #fff;
          }
        }
      }
    }
  }

  .filed-list {
    padding: 16px;

    .filed-item {
      padding: 18px 10px;
      display: flex;
      gap: 13px;
      background: linear-gradient(180deg, #ecfdf3 0%, #ffffff 100%);
      border-radius: 8px 8px 8px 8px;
      height: 80px;

      &:not(:last-child) {
        margin-bottom: 12px;
      }

      .icon {
        display: block;
        width: 45px;
      }

      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .p1 {
          color: #222222;
          font-size: 15px;
        }

        .p2 {
          color: #999999;
          font-size: 13px;
        }
      }
    }
  }

  .van-popup {
    padding: 20px 12px;

    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 20px;

      .left {
        position: absolute;
        left: 0;
        font-size: 14px;
        color: #666;
      }

      .title {
        margin: 0;
        font-size: 16px;
        color: #222222;
      }
    }

    .user-info {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      .flex {
        display: flex;
        align-items: center;

        .avatar {
          display: block;
          width: 45px;
          height: 45px;
          border-radius: 50%;
          margin-right: 10px;
        }

        .info {
          .phone {
            margin-bottom: 12px;
            font-size: 16px;
            color: #222;
          }

          .vip {
            font-size: 12px;
            color: #999;
          }
        }
      }

      .tips {
        padding: 0 4px;
        background: rgba(241, 100, 26, 0.1);
        border-radius: 2px;
        line-height: 18px;
        font-size: 12px;
        color: #f1641a;
      }
    }

    .title {
      margin: 20px 0 10px;
      font-size: 15px;
      color: #222222;
      line-height: 14px;
    }

    .img-wrapper {
      position: relative;
      img {
        display: block;
        width: 100%;
      }
      .content {
        position: absolute;
        top: 74px;
        left: 14px;
        font-size: 13px;
        line-height: 18px;
      }
    }

    .goods {
      display: flex;
      align-items: center;
      gap: 20px;

      .goods-item {
        flex: 1;
        background: #fff;
        border: 1px solid #eeeeee;
        border-radius: 10px;
        height: 80px;
        display: flex;
        gap: 10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &.selected {
          background: rgba(50, 188, 5, 0.1);
          border: 1px solid #32bc05;
        }

        .time {
          font-size: 18px;
          color: #222;
        }

        .year {
          font-size: 17px;
          color: #666;
        }
      }
    }

    .submit-btn {
      margin: 20px 0 10px;
      width: 100%;
    }

    .books {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #999;
      span {
        color: rgba(50, 188, 5, 1);
      }
    }
  }
}
</style>
